<template>
	<!-- 我的-康复顾问-会员管理 -->
	<view class="content">
		<view class="bg"></view>
		<view class="search">
			<view style="width: 100%;">
				<uni-search-bar placeholder="搜索姓名/手机号" bgColor="#FFFFFF" :radius="100" @confirm="search" v-model="searchValue" />
			</view>
			<image class="add-btn" src="/static/icon/add-btn.png" @click="add()"></image>
		</view>
		<!-- 会员列表 -->
		<view style="z-index: 100;">
			<view v-for="(item,index) in list" class="item" style="justify-content: space-between;">
				<view class="content-top" @click="goDetail(item.id)">
					<view style="display: flex;">
						<image :src="item.mainPhoto" class="img"></image>
						<view>
							<view class="name">{{item.name}}</view>
							<view class="phone">{{item.mobileTel}}</view>
						</view>
					</view>
					<image class="go-icon" src="/static/icon/expend.png"></image>
				</view>
				<view style="margin-top: 30rpx; display: flex;justify-content: space-between;">
					<view style="display: flex; align-items: center;">
						<image src="/static/icon/hysz.png" class="hysz-icon"></image>
						<view class="type">{{ getServiceName(item.orderList) }}</view>
					</view>
					<view class="type">康复部位：{{ this.getSymptomText(item.symptom) }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: "",
				list: [],
				pageno: 1,
				pagesize: 10,
				pageCount: 0,
			}
		},
		mounted() {
			this.memberPage();
		},
		onLoad() {

		},
		methods: {
			reLoadFn() {
				//刷新数据逻辑
				this.list = [],
					this.memberPage();
			},
			memberPage() {
				let that = this;
				uni.request({
					url: "https://guokang365.mordo-care.com/api/member/searchPageAllOr",
					method: 'POST',
					//仅为示例，并非真实接口地址。
					header: {
						'Cookie': "JSESSIONID=" + getApp().globalData.serverSession
					},
					data: {
						"page": {
							"pageno": that.pageno,
							"pagesize": that.pagesize
						},
						"conditions": [{
							"name": "name",
							"operate": "like",
							"value": that.searchValue
						}, {
							"name": "mobileTel",
							"operate": "like",
							"value": that.searchValue
						}],
						"cascades": [{
							"column": "orderList",
						}],
					},
					success: (res) => {
						// todo 入参是or
						if (res.data.result != '100') {
							// 获取会员统计数据失败，不确定是否要弹窗
						} else {
							// todo 展示列表
							// that.list = res.data.list;
							that.list = that.list.concat(res.data.list);
							that.pageCount = res.data.list.length;
						}
					},
				});
			},
			getSymptomText(value) {
				switch (value) {
					case 1:
						return '全髋'
					case 2:
						return '全膝'
					case 3:
						return '全肩'
					case 4:
						return '全肘'
					case 5:
						return '掌指'
					case 6:
						return '髋部'
					default:
						return ''
				}
			},
			search(res) {
				this.list = [];
				this.pageno = 1;
				this.pagesize = 10;
				this.pageCount = 0;
				this.memberPage();
			},
			goDetail(id) {
				uni.navigateTo({
					url: "/pages/my/custom-detail?id=" + id
				});
			},
			getServiceName(list) {
				if (list == null || list.length === 0) {
					// 处理空数组的情况
					return "";
				}

				const maxOrderTimeItem = list.reduce((prev, current) => {
					return prev.orderTime > current.orderTime ? prev : current;
				});

				const serviceName = maxOrderTimeItem.serviceName;
				return serviceName;
			},
			add() {
				uni.navigateTo({
					url: "/pages/my/custom-add"
				});
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.list = [];
				this.pageno = 1;
				this.pagesize = 10;
				this.pageCount = 0;
				this.memberPage();
				uni.stopPullDownRefresh()
			}, 500);
		},
		onReachBottom() {
			if (this.pageCount == this.pagesize) {
				this.pageno += 1;
				uni.showLoading({});
				setTimeout(() => {
					this.memberPage();
					uni.hideLoading()
				}, 500);
			}
		},
		// onUnload() {
		// 	uni.switchTab({
		// 		url: "/pages/my/index"
		// 	});
		// },
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.search {
		width: 750rpx;
		height: 128rpx;
		z-index: 1000;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 22rpx 0 10rpx;
		box-sizing: border-box;

	}

	.bg {
		width: 750rpx;
		height: 128rpx;
		background: #CBFFDB;
		filter: blur(25px);
		position: absolute;
		z-index: 1;
		top: 0px;
	}

	.add-btn {
		width: 100rpx;
		height: 66rpx;

	}

	.item {
		background: #FFFFFF;
		border-radius: 22rpx;
		box-shadow: 0rpx 11rpx 14rpx 0rpx #E9F7ED;
		display: flex;
		width: 707rpx;
		box-sizing: border-box;
		padding: 32rpx;
		flex-direction: column;
		z-index: 1000;
		margin-bottom: 30rpx;

		.content-top {
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #E1E1E1;
			padding-bottom: 30rpx;

			.img {
				border-radius: 50%;
				width: 74rpx;
				height: 74rpx;
				margin-right: 23rpx;
			}

			.name {
				font-size: 36rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #48AF4E;
				line-height: 51rpx;
				margin-top: -8rpx;
			}

			.phone {
				height: 36rpx;
				font-size: 25rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #464646;
				line-height: 36rpx;
			}
		}

		.type {
			font-size: 25rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #464646;
			text-align: center;
			margin-top: 6rpx;
		}

		.go-icon {
			width: 17rpx;
			height: 25rpx;
			margin-top: 10rpx;
		}

		.hysz-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 12rpx;
		}
	}
</style>